﻿<html>
  <head>
    <meta name="source">
    <meta name="generator" content="h-smile:richtext">
  </head>
<body>
  <h1>Graphics, Path and Text objects</h1>
  <h2 id="graphics">Graphics object</h2>
  <p>Represents graphic surface of the element.</p>
  <p>Pretty much all methods return Graphic object itself allowing cascading of calls so following <font face="Courier New">gfx.lineWidth(2).line(0,0,100,100)</font>will draw 2px line from (0,0) to (100,100).</p>
  <dl>
    <h3>Constants</h3>
    <dt>JOIN_MITER<br>JOIN_ROUND<br>JOIN_BEVEL</dt>
    <dd>Join types, values of <em>lineJoin</em> property</dd>
    <dt>CAP_BUTT<br>CAP_SQUARE<br>CAP_ROUND</dt>
    <dd>Line cap type, values of <em>lineCap</em> property</dd>
    <dt>ALIGN_DEFAULT<br>ALIGN_START<br>ALIGN_END<br>ALIGN_CENTER</dt>
    <dd>text alignment type, parameter values of <em>Text.Alignment</em> function</dd>
    <h3>Properties</h3>
    <dt>lineJoin</dt>
    <dd>rw - <em>integer</em>, one of JOIN_xxx constants. Type of line join.</dd>
    <dt>lineCap</dt>
    <dd>rw - <em>integer</em>, one of CAP_xxx constants. Type of line cap.</dd>
    <dt>blendMode</dt>
    <dd>rw - <em>integer</em>, one of BLEND_xxx constants. Blend mode of drawing operations.</dd>
    <dt>imageBlendMode</dt>
    <dd>rw - <em>integer</em>, one of BLEND_xxx constants. Blend mode of image renderings.</dd>
    <dt>imageBlendColor</dt>
    <dd>rw - <em>integer</em>, color. Image blending color.</dd>
    <h3>Static Methods</h3>
    <dt>RGBA</dt>
    <dd>
      <div>(<strong>red</strong><em>:integer</em> , <strong>green</strong><em>:integer</em>, <strong>blue</strong><em>:integer</em> [, <strong>alpha</strong><em>:integer|float (0.0 .. 1.0)</em>]) <em>:color</em> or<br>(<strong>s</strong><em>:</em>string) <em>:color</em></div>
      <p>Returns color rgba value. Example: var c = Graphics.RGBA(0xff,0,0); - pure red color or Graphics.RGBA(&quot;red&quot;); or Graphics.RGBA(&quot;#ff0000&quot;);</p></dd>
    <h3>Methods</h3>
    <dt> <strike>constructor</strike></dt>
    <dd>(non-creatable object)</dd>
    <dt>clearAll</dt>
    <dd>
      <div>( [color: color] ): Graphics</div>
      <p>Clears the graphics.</p></dd>
    
    <h4>Shapes and Lines</h4>
    <dt>line</dt>
    <dd>
      <div>( <strong>x1</strong>:<em>float</em>, <strong>y1</strong>:<em>float</em>, <strong>x2</strong>:<em>float</em>, <strong>y2</strong>:<em>float</em> ) : Graphics</div>
      <p>Draws line from x1,y1 to x2,y2 using current lineColor and lineGradient.</p></dd>
    <dt>triangle</dt>
    <dd>
      <div>( x1:<em>float</em>, y1:<em>float</em>, x2:<em>float</em>, y2:<em>float</em>, x3:<em>float</em>, y3:<em>float</em> ) : Graphics</div>
      <p>Draws triangle using current lineColor/lineGradient and fillColor/fillGradient.</p></dd>
    <dt>rectangle</dt>
    <dd>
      <div>( x:<em>float</em>, y:<em>float</em>, w:<em>float</em>, h:<em>float</em> ) or</div>
      <div>( x:<em>float</em>, y:<em>float</em>, w:<em>float</em>, h:<em>float</em>, r:<em>float</em> ) or</div>
      <div>( x:<em>float</em>, y:<em>float</em>, w:<em>float</em>, h:<em>float</em>, rx:<em>float</em>, ry:<em>float</em> ) or</div>
      <div>( x:<em>float</em>, y:<em>float</em>, w:<em>float</em>, h:<em>float</em>, rx_top:<em>float</em>, ry_top:<em>float</em>, rx_bottom:<em>float</em>, ry_bottom:<em>float</em> ) : Graphics</div>
      <p>Draws rectangle using current lineColor/lineGradient and fillColor/fillGradient with (optional) rounded corners.</p></dd>
    <dt>ellipse</dt>
    <dd>
      <div>( x1:<em>float</em>, y1:<em>float</em>, r:<em>float</em> ) : Graphics or</div>
      <div>( x1:<em>float</em>, y1:<em>float</em>, rx:<em>float</em>, ry:<em>float</em> ) : Graphics</div>
      <p>Draws circle or ellipse using current lineColor/lineGradient and fillColor/fillGradient.</p></dd>
    <dt>arc</dt>
    <dd>
      <div>( x1:<em>float</em>, y1:<em>float</em>, rx:<em>float</em>, ry:<em>float</em>, startAngle:<em>float</em>, swipeAngle:<em>float</em> ) : Graphics</div>
      <p>Draws arc or pie (if fill is set) using current lineColor/lineGradient and fillColor/fillGradient.</p></dd>
    <dt>star</dt>
    <dd>
      <div>( x1:<em>float</em>, y1:<em>float</em>, r1:<em>float</em>, r2:<em>float</em>, startAngle:<em>float</em>, numRays:<em>integer</em> ) : Graphics</div>
      <p>Draws star using current lineColor/lineGradient and fillColor/fillGradient.</p></dd>
    <dt>polygon</dt>
    <dd>
      <div>( x1:<em>float</em>, y1:<em>float</em>, x2:<em>float</em>, y2:<em>float</em>, .... ) : Graphics or</div>
      <div>( v1:array, v2:<em>array</em>, .... ) : Graphics</div>
      <p>Draws polygon using current lineColor/lineGradient and fillColor/fillGradient.</p></dd>
    <dt>pointInPolygon</dt>
    <dd>
      <div>( x:<em>float</em>, y:<em>float, </em>polyX1:<em>float</em>, polyY1:<em>float</em>, polyX2:<em>float</em>, polyY2:<em>float</em>, ....<em></em>&nbsp;): <em>true</em> | <em>false</em> or</div>
      <div>( x:<em>float</em>, y:<em>float, </em>polygon:<em>array</em> ): <em>true</em> | <em>false</em></div>
      <p>Checks if point (x,y) is inside the polygon.</p></dd>
    <dt>polyline</dt>
    <dd>
      <div>( x1:<em>float</em>, y1:<em>float</em>, x2:<em>float</em>, y2:<em>float</em>, .... ) : Graphics or</div>
      <div>( v1:array, v2:<em>array</em>, .... ) : Graphics</div>
      <p>Draws polyline (multi-segment line) using current lineColor/lineGradient and fillColor/fillGradient.</p></dd>
    <dt>drawPath</dt>
    <dd>
      <div>( path: Graphics.Path ) : Graphics</div>
      <p>Draws the path object using current fill and stroke brushes.</p></dd>
    <dd>
      <div>
        <div>Path primitives</div>
        <div></div></div></dd>
    <dt>copyImage</dt>
    <dd>
      <div>( img:<a href="Image.htm">Image</a> , x:<em>float</em>, y:<em>float</em> [, xIimg:<em>integer</em>, yImg:<em>integer, </em>wIimg:<em>integer</em>, hImg:<em>integer</em> ] ) : Graphics</div>
      <p>Does bit-blit of the image pixels onto the graphics surface. No transformation applied to the image.</p></dd>
    <h4>Image rendering</h4>
    <dt>blendImage</dt>
    <dd>
      <div>( img:<a href="Image.htm">Image</a> , x:<em>float</em>, y:<em>float</em> [, xIimg:<em>integer</em>, yImg:<em>integer, </em>wIimg:<em>integer</em>, hImg:<em>integer</em> ] [, alpha: float | integer] ) : Graphics</div>
      <p>Blends <em>img</em> onto the graphics surface. Operation takes in account per pixel alpha of the imeage and optional <em>alpha</em> value. alpha here is either float [ 0.0 .. 1.0 ] or integer [ 0 .. 255 ].</p></dd>
    <dt>drawImage</dt>
    <dd>
      <div>( img:<a href="Image.htm">Image</a> , x:<em>float</em>, y:<em>float</em> [, w:<em>float</em>, h:<em>float</em>]<em></em>[, xIimg:<em>integer</em>, yImg:<em>integer, </em>wIimg:<em>integer</em>, hImg:<em>integer</em> ] ) : Graphics</div>
      <p>Draws <em>img</em> onto the graphics surface with current transformation applied (scale, rotation).</p></dd>
    <h4>Storke and Fill attributes</h4>
    <dt>strokeWidth</dt>
    <dd>
      <div>( width: float ) : Graphics</div>
      <p>Set line width for subsequent drawings.</p></dd>
    <dt>strokeColor</dt>
    <dd>
      <div>( color: color ) : Graphics</div>
      <p>Set line color for subsequent drawing operations.</p></dd>
    <dt>strokeJoin</dt>
    <dd>
      <div>( cap: #mitter | #round | #bevel ) : Graphics</div>
      <p>Stroke join rendering type.</p></dd>
    <dt>strokeCap</dt>
    <dd>
      <div>( cap: #butt | #square | #round ) : Graphics</div>
      <p>Stroke cap - stroke dash ending style.</p></dd>
    <dt>strokeDash</dt>
    <dd>
      <div>( dash: #solid | #dotted | #dashed | pattern: Array  [, offset: float ]) : Graphics</div>
      <p>Stroke dash type, either one of predefined types (#solid, #dotted or #dashed) or custom pattern defined by an array whose elements (floats) are set to the length of each dash and space in the dash pattern.&nbsp;</p></dd>
    <dt>noStroke</dt>
    <dd>
      <div>() : Graphics</div>
      <p>Disables line (outline) drawing.</p></dd>
    <dt>fillColor</dt>
    <dd>
      <div>( color: color ) : Graphics</div>
      <p>Set color for solid fills.</p></dd>
    <dt>strokeLinearGradient</dt>
    <dd>
      <div>( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics</div>
      <p>Setup parameters of gradient linear of lines.</p></dd>
    <dt>strokeLinearGradient</dt>
    <dd>
      <div>( x1: float, y1: float, x2: float, y2: float, colors: [color1, color2, color3, .. ] ) : Graphics</div>
      <p>Setup parameters of gradient linear fills using multiple colors.</p></dd>
    <dt>strokeLinearGradient</dt>
    <dd>
      <div>( x1: float, y1: float, x2: float, y2: float, colors: [color1, color2, color3], colorstops: [float, float, float] ) : Graphics</div>
      <p>Setup parameters of gradient linear fills using multiple colors and color stop position (0.0 ... 1.0).</p></dd>
    <dt>fillLinearGradient</dt>
    <dd>
      <div>( x1: float, y1: float, x2: float, y2: float, color1: rgba, color2: rgba [, p: float] ) : Graphics</div>
      <p>Setup parameters of linear gradient fill using two end colors.</p></dd>
    <dl><dt>fillLinearGradient</dt>
    <dd>
      <div>( x1: float, y1: float, x2: float, y2: float, colors: Array&nbsp;[, stops: Array] ) : Graphics</div>
      <p>Setup parameters of linear&nbsp;gradient  fill using list of&nbsp;<i></i><i>colors</i>. Optionally you can provide <i></i><i>stop positions</i> - array of 0.0 ... 1.0 values. &nbsp;</p></dd></dl><dt>lineRadialGradient</dt>
    <dd>
      <div>( x1: float, y1: float, r: float, color1: rgba, color2: rgba [, p: float] ) : Graphics</div>
      <p>Setup parameters of gradient radial drawing of lines.</p></dd>
    <dd></dd>
    <dt>fillRadialGradient</dt>
    <dd>
      <div>( x1: float, y1: float, r: float, color1: rgba, color2: rgba [, p: float] ) : Graphics</div>
      <p>Setup parameters of gradient radial fill.</p></dd>
    <dl><dt>fillRadialGradient</dt>
    <dd>
      <div>( x1: float, y1: float, r: float, colors: Array&nbsp;[, stops: Array] ) : Graphics</div>
      <p>Setup parameters of gradient radial fill using list of&nbsp;<i></i><i>colors</i>. Optionally you can provide <i></i><i>stop positions</i> - array of 0.0 ... 1.0 values.&nbsp;</p></dd></dl><dt>noFill</dt>
    <dd>
      <div>( ) : Graphics</div>
      <p>Disables fills for subsequent drawing operations.</p></dd>
    <h4>Affine transformations</h4>
    <dt>rotate</dt>
    <dd>
      <div>( radians: float ) : Graphics</div>
      <p>Rotate coordinate system on <em>radians</em> angle.</p></dd>
    <dt>scale</dt>
    <dd>
      <div>( sx: float, sy: float ) : Graphics</div>
      <p>Scale coordinate system. <code>sx</code> is the scale factor in the horizontal direction and <code>sy</code> is the scale factor in the vertical direction. Both parameters must be positive numbers. Values smaller than <code>1.0</code> reduce the unit size and values larger than <code>1.0</code> increase the unit size.</p></dd>
    <dt>translate</dt>
    <dd>
      <div>( tx: float, ty: float ) : Graphics</div>
      <p>Move origin of coordinate system to the (tx,ty) point.</p></dd>
    <dt>skew</dt>
    <dd>
      <div>( shx: float, shy: float ) : Graphics</div>
      <p>Setup skewing (shearing) transformation.</p>
			</dd><dt>transform</dt>
		<dd>( sx : float, shy : float, shx : float, sy : float, tx : float, ty : float&nbsp;) : Graphics<p>Sets transformation matrix described by&nbsp;</p>
			<pre>  sx  shy tx
[ shx sy  ty ]
  0   0   1 </pre></dd>
    <dt>screenToWorld</dt>
    <dd>
      <div>(r: number) : float</div></dd>
    <dt>screenToWorld</dt>
    <dd>
      <div>(x: number, y: number) : (float, float)</div>
      <p>These two functions translate coordinates from screen coordinate system to the one defined by rotate(),scale(), translate(), skew() and or transform().</p></dd>
    <dt>worldToScreen</dt>
    <dd>
      <div>(r: number) : float</div></dd>
    <dt>worldToScreen</dt>
    <dd>
      <div>x: number, y: number) : (float, float)</div>
      <p>These two functions translate coordinates from coordinate system defined by rotate(),scale(), translate() and/or skew() to screen coordinate system.</p></dd>
    <h4>Text output</h4>
    <dt>drawText</dt>
    <dd>
      <div>( text: <em>Graphics.Text</em>, x: float, y: float [, clr: color] [, pointOf: integer] ) : Graphics</div>
      <p>Renders text layout object (see below) at position (x,y) with optional parameters:</p>
      <ul>
        <li>clr - color, if provided it is used to render the text. If no color is given then current fill an stroke brushes are used to render text with outlines.</li>
        <li>pointOf - number in the range 1..9, defines what part of text layout corresponds to point (x,y). For meaning of numbers see numeric pad on keyboard. &nbsp;Example:<br><code>gfx.drawText(text, 100,100, 5);</code> - text will drawn with its center loacated at (100,100) point.<br>By default pointOf=7 is used - x,y are coordinates of top/left corner of the text.</li></ul></dd>
    <dt>fonts</dt>
    <dd>
      <div>( [template:string] ) : array of strings, class method (a.k.a. static method).</div>
      <p>Returns array of strings - list of installed font names. <em>template</em> if defined is a template for font name. E.g. Graphics.fonts(&quot;Arial*&quot;) may return array like [&quot;Arial&quot;, &quot;Arial Black&quot;, &quot;Arial Narrow&quot;] on your OS.</p></dd>
    <h4>State</h4>
    <dt>antialiasing</dt>
    <dd>
      <div>( <strong>onOff</strong>: boolean ) : Graphics</div>
      <p>Enables/disables anti-aliasing. By default anti-aliasing is <i>on</i>.</p></dd>
    <dt>save</dt>
    <dd>
      <div>( ) : Graphics</div>
      <p>Saves current Graphics attributes on top of internal state stack.</p></dd>
    <dt>restore</dt>
    <dd>
      <div>( ): Graphics</div>
      <p>Restores Graphics attributes from top of internal state stack.</p></dd>
    <h4>Layers</h4>
    <dt>pushLayer</dt>
    <dd>
      <div>( <strong>x</strong>: float, <strong>y</strong>: float, <strong>width</strong>: float, <strong>height</strong>: float [, <strong>opacity</strong>: 0.0... 1.0 | <b>filter</b>] ) : Graphics</div>
      <p>Sets rectangular clip region with optional opacity.</p></dd>
    <dt>pushLayer</dt>
    <dd>
      <div>( <strong>region</strong>: Graphics.Path [, <strong>opacity</strong>: 0.0... 1.0] ) : Graphics</div>
      <p>Sets clip region equal to the path object, with optional opacity.</p></dd>
    <dt>pushLayer</dt>
    <dd>
      <div>( <strong>image</strong>: Image, mask1a: true | false, [, <strong>opacity</strong>: 0.0... 1.0] ) : Graphics</div>
      <p>Sets clip mask from image. If <em>mask1a</em> is true then all pixels corresponding mask alpha == 0 will <strong>not</strong> be rendered. If <em>mask1a</em> is false then it is an inverse mask - all pixels corresponding mask alpha == 0 will be rendered</p></dd>
    <dt>pushLayer</dt>
    <dd>
      <div>( <strong>area</strong>: Symbol [, <b>filter</b>] ) : Graphics</div>
      <p>Sets clip region equal to one of the following:</p>
      <ul>
        <li> <code>#background-area</code> - background area of the element, including rounded borders if they are dclared for the element;</li>
        <li> <code>#client-box</code> - client box of the element ( inner box minus areas occupied by scrollbars );</li>
        <li> <code>#margin-box</code> - margin box of the element;</li>
        <li> <code>#border-box</code> - border box of the element;</li>
        <li> <code>#padding-box</code> - padding box of the element;</li>
        <li> <code>#inner-box</code> - inner, content box of the element;</li>
				</ul>
			<p>The <i>filter</i> is one of CSS filter values (expressed as a tuple):</p>
			<ul><li> <code>[blur:</code> radius<code>]</code> - radius here is a length unit&nbsp;</li><li> <code>[brightness:</code> 0.0...1.0<code>]</code></li><li> <code>[contrast:</code> 0.0...1.0<code>]</code></li><li> <code>[grayscale:</code> 0.0...1.0<code>]</code></li><li> <code>[hue-rotate:</code> 0...360<code>]</code></li><li> <code>[invert:]</code></li><li> <code>[opacity:</code> 0.0...1.0<code>]</code></li><li> <code>[saturate:</code> 0.0...1.0<code>]</code></li><li> <code>[sepia:</code> 0.0...1.0<code>]</code></li><li> <code>[drop-shadow:</code> color, dx, dy, radius, spread<code>]</code> - dx,dy,radius and spread are length units.</li><html>dx,dy,radius,spread</html><html>radius here is a length unit&nbsp;</html></ul></dd>
    <dt>popLayer</dt>
    <dd>
      <div>( ): Graphics</div>
      <p>pops graphics layer from the graphics. If the layer uses opacity it gets rendered at this moment.</p></dd></dl>
  <h2>Graphics.Path object</h2>
  <dl>
    <dt>this</dt>
    <dd>
      <div>( [<b>d</b>:string] ) : Graphics</div>
      <p>Constructor, starts new path. Use as <code>var path = new Graphics.Path();</code> &nbsp;to construct new path object.</p>
			<p> <i>d</i> is a value of SVG's <code>&lt;path d=...&gt;</code> attribute that, if provided, will initialize the path.</p></dd>
    <dt>moveTo</dt>
    <dd>
      <div>( x:<em>float</em>, y:<em>float </em>[, relative <em>= false</em> ] ) : Graphics.Path</div>
      <p>Moves current drawing path position to x,y. If <em>relative</em> is <em>true</em> then <em>x</em> and <em>y</em> are interpreted as deltas from the current path position.</p></dd>
    <dt>lineTo</dt>
    <dd>
      <div>( x:<em>float</em>, y:<em>float </em>[, relative <em>= false</em> ] ) : Graphics.Path</div>
      <p>Draws line and moves current drawing path position to x,y. If <em>relative</em> is <em>true</em> then <em>x</em> and <em>y</em> are interpreted as deltas from the current path position.</p></dd>
    <dt>hlineTo</dt>
    <dd>
      <div>( x:<em>float </em>[, relative <em>= false</em> ] ) : Graphics.Path</div>
      <p>Draws horizontal line and moves current drawing path position to x, (current)y. If <em>relative</em> is <em>true</em> then <em>x</em> is interpreted as a delta from the current path position.</p></dd>
    <dt>vlineTo</dt>
    <dd>
      <div>( y:<em>float </em>[, relative <em>= false</em> ] ) : Graphics.Path</div>
      <p>Draws vertical line and moves current drawing path position to (current)x, y. If <em>relative</em> is <em>true</em> then <em>y</em> is interpreted as a delta from the current path position.</p></dd>
    <dt>arcTo</dt>
    <dd>
      <div>( x1:<em>float</em>, y1:<em>float,</em> x2:<em>float</em>, y2:<em>float</em>, radius: <em>float&nbsp;</em><em></em>[, relative <em>= false</em> ] ) : Graphics.Path</div>
      <p>Draws arc at the corner (point x1,y1) between two lines x0,y0 to x1,y1 and x1,y1 to x2,y2.  See: <a onmousedown="return rwt(this,'','','','3','AFQjCNEYwX0AEYPgDi7lZpmT-fu-hkXZDg','','0ahUKEwiIlomZyu7UAhUL4WMKHUIGC24QFgg1MAI','','',event)" href="https://www.google.ca/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=3&amp;ved=0ahUKEwiIlomZyu7UAhUL4WMKHUIGC24QFgg1MAI&amp;url=http%3A%2F%2Fwww.dbp-consulting.com%2Ftutorials%2Fcanvas%2FCanvasArcTo.html&amp;usg=AFQjCNEYwX0AEYPgDi7lZpmT-fu-hkXZDg" data-ctbtn="0" data-cthref="/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=3&amp;ved=0ahUKEwiIlomZyu7UAhUL4WMKHUIGC24QFgg1MAI&amp;url=http%3A%2F%2Fwww.dbp-consulting.com%2Ftutorials%2Fcanvas%2FCanvasArcTo.html&amp;usg=AFQjCNEYwX0AEYPgDi7lZpmT-fu-hkXZDg">Canvas 
ArcTo Tutorial</a></p></dd>
    <dt>arc</dt>
    <dd>
      <div>( cx:<em>float</em>, cy:<em>float,</em> radius:<em>float</em>[, radiusy:<em>float</em>], start: <em>float | angle&nbsp;</em><em></em>, swipe : <i>float | angle</i> ) : Graphics.Path</div>
      <p>Draws arc at center&nbsp;(point <i>cx</i>,<i>cy</i>) with <i>radius</i> and <i>start</i> and <i>swipe</i> angles. Swipe is a rotation angle - if it is positive then direction is clockwise, negative - counterclockwise.</p></dd>
    <dt>quadraticCurveTo</dt>
    <dd>
      <div>( xc:<em>float</em>, yc:<em>float</em> , x:<em>float</em>, y:<em>float</em> [, relative <em>= false</em> ] ) : Graphics.Path</div>
      <p>(tbd)</p></dd>
    <dt>bezierCurveTo</dt>
    <dd>
      <div>( xc1:<em>float</em>, yc1:<em>float</em> , xc2:<em>float</em>, yc2:<em>float, </em>x:<em>float</em>, y:<em>float</em> [, relative <em>= false</em> ] ) : Graphics.Path</div>
      <p>(tbd)</p></dd>
    <dt>close</dt>
    <dd>
      <div>( &nbsp;) : Graphics.Path</div>
      <p>closes current path/figure.</p></dd>
    <dt>fillEvenOdd</dt>
    <dd>
      <div>( <strong>even</strong>: true|false ) : Graphics.Path</div>
      <p>Set even/odd rule for polygon fills.</p></dd>
    <dt>isPointInside</dt>
    <dd>
      <div>( <strong>x</strong>: float, <strong>y</strong>: float ) : true | false</div>
      <p>Tests if point (x,y) is inside the path</p>
			</dd><dt>bounds</dt>
		<dd>() : x1,y1,x2,y2&nbsp;<p>returns x1,y1,x2,y2 float numbers - left,top,right,bottom bounds of the path.&nbsp;</p></dd>
    <dt>combine</dt>
    <dd>
      <div>( <strong>mode</strong> : symbol, <strong>other</strong> : Graphics.Path ) : Graphics.Path</div>
      <p>combines <em>this</em> path with the <em>other</em>, returns new, combined path. The <em>mode</em> is one of:</p>
      <ul>
        <li> <strong>#union</strong> - result path is a unioin of these two - contains areas presented in <em>this</em> <strong>or</strong> <em>other</em> paths;</li>
        <li> <strong>#intersect</strong> - result path is an intersection of these two - contains areas presented in <em>this</em> <strong>and</strong> <em>other</em> paths;</li>
        <li> <strong>#xor</strong> - result path is an xor of these two - contains areas presented <strong>only</strong> in <em>this</em> <strong>or</strong> <em>other</em> paths but not in both;</li>
        <li> <strong>#exclude</strong> - result path contains areas presented in <em>this</em> path with overlaping areas from <em>other</em> excluded.</li></ul></dd></dl>
  <h2>Graphics.Text object</h2>
  <p>Represents text layout object to be rendered on graphics.</p>
  <p>All length metrics of the Text are in DIPs - device independent pixels (1/96 of inch).</p>
  <dl>
    <h3>Properties</h3>
    <dt>lines</dt>
    <dd>r - integer, reports number of lines in text layout. To get meaningful values you should set width of the text layout object first like <code>text.width(100);</code></dd>
    <dt>chars</dt>
    <dd>r/w - string, characters rendered by the text layout. Changing characters after construction invalidates min/max width and height of the object.</dd>
    <dt>font</dt>
    <dd>r/w - string, a string parsed as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font">CSS font</a> value. The default font is the font used by owner Element (or document if owner is not provided in constructor).</dd>
    <dt>style</dt>
    <dd>r/w - string, a string parsed as DOM <i>style</i> attribute of DOM Element. By using this property you can define not just font properties but all other text associated ones like <code>line-height</code>, <code>text-align</code>, <code>vertical-align</code>, <code>text-decoration</code>, etc.&nbsp;</dd>
    <dt>class</dt>
    <dd>r/w - string, name of a class defined in style sheet. This allows to define text properties not in code but in CSS.&nbsp;<p>Example, if the text is used to render labels on some chart widget:</p>
			
			
			
			<pre>var chart = this;
var label = new Graphics.Text(&quot;I quarter&quot;, chart); 
label.class = &quot;label&quot;;</pre><p>then you can define styles of such labels as</p>
			
			
			
			<pre>chart &gt; text.label {
  font-size:75%;
  color: #000;
}</pre></dd>
    <h3>Methods</h3>
    <dt>this</dt>
    <dd>
      <div>(str: <em>string</em> [, owner: <em>Element</em>])</div>
      <p>Constructs Text object from a string. &nbsp;When <em>styleSource</em> is provided it is used for assigning initial style (font,alignment, etc) to the text.</p></dd>
    <dt>width</dt>
    <dd>
      <div>( ) : ( maxWidth:<em>float</em>, minWidth:<em>float</em>, boxWidth:<em>float</em> )</div>
      <p>Returns maximal/minimal widths of the text and box width previously set by width(w).</p>
      <p>Maximal width is the width of the text without wrapping. If the text contains new line [sequences] then function returns width of widest string. And minimal width is a width of widest word (non-breakable sequence) in the text.</p></dd>
    <dt>width</dt>
    <dd>
      <div>( w:float ) : Graphics.Text</div>
      <p>Sets width of the Text object. After width is set all dependent attributes (height, lines) can be retrieved.</p></dd>
    <dt>height</dt>
    <dd>
      <div>( ) : (textHeight:float, boxHeight:float)</div>
      <div>Returns pair: computed height of the Text object and box height previously set by height(h).</div></dd>
    <dt>height</dt>
    <dd>
      <div>( boxHeight: <em>float</em> ) : Text</div>
      <div>Sets box height of the Text object.</div></dd>
    <dt>line</dt>
    <dd>
      <div>(linNo: <em>integer</em>) : ( y: <em>float</em>, height: <em>float</em>, baselineOffset: float, length:<em>integer</em> )</div>
      <p>Returns metrics of particular line in text layout object:</p>
      <ul>
        <li>y - distance the line from the start of the text;</li>
        <li>height - height of the line;</li>
        <li>baselineOffset - offset of the baseline from y value of the line;</li>
        <li>length - number of characters (UTF16 code units to be precise) in this line including new line sequence if there is any.</li></ul></dd>
    <dt>alignment</dt>
    <dd>
      <div>( textAlignment: ALIGN_***, verticalAlignment: ALIGN_*** ) : Graphics.Text</div>
      
			<p>Sets text and vertical alignment of the text object.</p>
			<p><b>OBSOLETE</b>: use Text.style or&nbsp;Text.class</p></dd>
    <dt>alignment</dt>
    <dd>
      <div>( ) : ( ALIGN_***, ALIGN_***)</div>
      <p>Returns text and vertical alignment of the text object.</p>
			<p><b>OBSOLETE</b>: use Text.style or&nbsp;Text.class</p></dd></dl>
  <div></div>
</body>
</html>